<template>
    <div class="left-box">
        <h1>辅助函数操作vuex</h1>
        <div>state:{{count}}</div>
        <div>getters:{{doubleCount}}</div>
        <div>
            <button @click="add">同步+</button>
            <button @click="sub">异步+</button>
        </div>
    </div>
</template>
<script>
    /*
        辅助函数获取vuex中state的步骤
        1、从vuex库中导入mapState函数
        2、在computed中通过调用扩展mapState然后来完成映射
        辅助函数获取vuex中getters的步骤
        1、从vuex库中导入mapGetters函数
        2、在computed中通过调用扩展mapGetters然后来完成映射
        辅助函数操作状态机vuex中mutations
        this.$store.commit('incrementSync',传递的值)
        1、从vuex库中导入mapMutations的函数
        2、在methods中进行扩展调用
        辅助函数操作状态机vuex中actions
        1、从vuex库中导入mapActions函数
    */
    import {mapGetters, mapState,mapMutations,mapActions} from 'vuex'
    export default{
        computed:{
           ...mapState(['count']),
           ...mapGetters(['doubleCount'])
        },
        methods:{
            ...mapMutations(['incrementSync']),
            ...mapActions(['incrementAsync']),
            add(){
                this.incrementSync(2)
            },
            sub(){
                this.incrementAsync(5)
            }
        }
    }
</script>


<style lang="scss" scoped>
    .left-box{
        flex-grow: 1;
        height: 100vh;
        background:orange;
    }
</style>